<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/bootstrap-paginator.js"></script>
</head>
<body>
<div class="container">
    <div th:replace="common/head.html"></div>
    <div th:replace="common/menu.html"></div>
    <div th:replace="common/nav.html"></div>

    <form action="javascript:void(0)" class="row-fluid" id="stuAddForm">
        <div class="row-fluid d-flex justify-content-around">
            <div class="col-4">
                <div>
                    <label for="inpNo" class="col-form-label">学号</label>
                    <input type="text" class="form-control" name="uNo" id="inpNo" th:value="${stuInf?.NO}" required>
                </div>
            </div>
            <div class="col-4">
                <div>
                    <label for="inpName" class="col-form-label">姓名</label>
                    <input type="text" class="form-control" name="uName" id="inpName" th:value="${stuInf?.Name}"
                           required>
                </div>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-around">
            <div class="col-4">
                <div>
                    <label for="inpSex" class="col-form-label">性别</label>
                    <select class="form-control" name="uSex" id="inpSex">
                        <option th:value="${stuInf?.Sex} ?: null"
                                th:utext="${stuInf?.Sex} ?: '请选择性别'"></option>
                        <option th:each="sItem : ${SexList}" th:value="*{sItem.Value}"
                                th:utext="*{sItem.Value}"></option>
                    </select>
                </div>
            </div>
            <div class="col-4">
                <div>
                    <label for="inpNation" class="col-form-label">民族</label>
                    <select class="form-control" name="uNation" id="inpNation">
                        <option th:value="${stuInf?.Nation} ?: null"
                                th:utext="${stuInf?.Nation} ?: '请选择民族'"></option>
                        <option th:each="nItem : ${NationList}" th:value="*{nItem.Value}"
                                th:utext="*{nItem.Value}"></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-around">
            <div class="col-4">
                <div>
                    <label for="inpClass" class="col-form-label">班级</label>
                    <select class="form-control" name="uClass" id="inpClass">
                        <option th:value="${stuInf?.classInf?.ClassID} ?: null"
                                th:utext="${stuInf?.classInf?.Name} ?: '请选择班级'"></option>
                        <option th:each="cItem : ${ClassList}" th:value="*{cItem.ClassID}"
                                th:utext="*{cItem.Name}"></option>
                    </select>
                </div>
            </div>
            <div class="col-4">
                <div>
                    <label for="inpPA" class="col-form-label">政治面貌</label>
                    <select class="form-control" name="uPA" id="inpPA">
                        <option th:value="${stuInf?.Political_Appearance} ?: null"
                                th:utext="${stuInf?.Political_Appearance} ?: '请选择政治面貌'"></option>
                        <option th:each="pItem : ${PAList}" th:value="*{pItem.Value}"
                                th:utext="*{pItem.Value}">
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-around">
            <div class="col-4">
                <div>
                    <label for="inpBirDay" class="col-form-label">出生日期</label>
                    <input class="form-control" type="date" name="uBirDay" id="inpBirDay"
                           th:value="${#dates.format(stuInf?.Birthday,'yyyy-MM-dd')}" required>
                </div>
            </div>
            <div class="col-4">
                <div>
                    <label for="uInDate" class="col-form-label">入学时间</label>
                    <input class="form-control" type="date" name="uInDate" id="uInDate"
                           th:value="${#dates.format(stuInf?.Admission_Time,'yyyy-MM-dd')}" required>
                </div>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-center" style="margin-top:30px">
            <div class="col-4">
                <div>
                    <label for="inpPic" class="col-form-label">头像</label>
                    <input class="form-control" th:if="${#strings.equals(Mode,'Modify') ||
                                                        #strings.equals(Mode,'Add')}"
                           type="file" name="uPic" id="inpPic" required>
                    <img th:if="${#strings.equals(Mode,'Detail')}" th:src="${stuInf?.Pic}" alt="HeadImage" style="width:300px">
                </div>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-center">
            <div class="col-10">
                <label for="inpDetails" class="col-form-label">备注</label>
                <textarea class="form-control" name="uDetails"
                          id="inpDetails" cols="100%" rows="5" th:utext="${stuInf?.Desc}"></textarea>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-center" style="margin: 20px 0">
            <div class="col-1">
                <div>
                    <input class="btn btn-success" type="submit" value="保存" th:if="${Mode!='Detail'}">
                </div>
            </div>
            <div class="col-1">
                <div>
                    <input class="btn btn-primary backBtn" type="button" value="返回">
                </div>
            </div>
            <div class="col-1">
                <div>
                    <input class="btn btn-danger" type="reset" value="重置" th:if="${Mode!='Detail'}">
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="inpNullErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">请完善信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>所有项（除备注）均为必填项，请完善资料！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="DBErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">数据库错误</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>数据库写入数据出现问题，请联系管理员进行维护！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="sucModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">操作成功</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>学生信息操作成功！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>

<script th:inline="javascript">
    var Mode = [[${Mode}]];

    if (Mode === "Detail") {
        $("input,select,textarea").attr("readonly", "readonly");
    }
    
    if (Mode === "add" || Mode === "Modify") {
        $("input,select,textarea").removeAttr("readonly");
    }
    
    if (Mode === "Modify") {
        $("input[name=uNo]").attr("readonly", "readonly");
        $("input[name=uPic]").removeAttr("required");
    }
</script>

<script src="js/opStudentInf.js"></script>

</html>